<template>
  <div>
    <!-- 搜索和添加栏 -->
    <div class="search-lan" id="search">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加</el-button
      >

      <!-- 对话框 -->
      <el-dialog title="请添加景区" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="票名" prop="type">
            <el-input v-model="ruleForm.type"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="title">
            <el-select v-model="ruleForm.title" placeholder="请选择购票方式">
              <el-option label="网上购票" value="1"></el-option>
              <el-option label="线上抢购" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="ruleForm.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>


          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="详情" prop="details">
            <el-input type="textarea" v-model="ruleForm.details"></el-input>
          </el-form-item>
          <el-form-item label="预定须知" prop="reserve">
            <el-input type="textarea" v-model="ruleForm.reserve"></el-input>
          </el-form-item>
          <el-form-item label="门票优惠政策" prop="preferenti">
            <el-input type="textarea" v-model="ruleForm.preferenti"></el-input>
          </el-form-item>

          <!-- <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <router-view />
    <spot-list :sl="sl_data" />
 <el-footer>
 <el-pagination
    layout="prev, pager, next"
     :page-count="sl_data.sumpage"
            @current-change="handleCurrentChange"
     >
  </el-pagination>
  
        </el-footer>
        
  </div>
</template>

<script>
import SpotList from "@/components/SpotList.vue";
import AddSpot from "@/components/AddSpot.vue";
export default {
  components: { SpotList, AddSpot },

  data() {
    return {
    page:'1',
      //用于接收spotlist的信息
      sl_data: "",
      input: "",
      ruleForm: {
        name: "",
        title: "",
        date1: "",
        date2: "",
        // delivery: false,
        // type: [],
        // resource: "",
        price: "",
        details: "",
        reserve: "",
        preferenti:'',
    
      },
      rules: {
        type: [
          { required: true, message: "请输入旅游景点票名", trigger: "blur" },
          { min: 3, max: 25, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        title: [
          { required: true, message: "请选择购票方式", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        price: [
          {
            type: "string",
            required: true,
            message: "请填写价格",
            trigger: "change",
          },
        ],
      //   resource: [
      //     { required: true, message: "请选择活动资源", trigger: "change" },
      //   ],
      //   desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
       },
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },

    mounted() {
      this.getsldata()
     
  },
  //请求景点列表数据
  methods: {
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val
        console.log(this.page)
        this.getsldata()
      },
    getsldata(){
      const url = `/mp_fy?pageSize=5&&curpage=${this.page}`;
    this.axios.get(url).then((res) => {
      this.sl_data = res.data;
      console.log(res);
    });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("创建成功!");
        } else {
          console.log("创建失败!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
#search {
  display: flex;
  margin-bottom: 20px;
}
</style>